<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">我的收藏</view>
		</view>
		<view class="main-content">
			<view class="main">
				<view class="job-list">
					<view class="job-card" v-for="item in jobList" :key="item.id">
						<view class="company-info">
							<view class="company-logo"></view>
							<view class="company-meta">
								<view class="company-name">{{ item.companyName }}</view>
								<view class="company-tags">
									<view class="tag">{{ item.companyCount }}</view>
									<view class="tag">{{ item.companyIndustry }}</view>
								</view>
							</view>
						</view>
						<view class="job-info">
							<view class="job-header">
								<view class="job-title">{{ item.jobTitle }}</view>
								<view class="job-salary">{{ item.jobSalary }}</view>
							</view>
							<view class="job-tags">
								<view class="tag" v-for="tagItem in item.jobTags" :key="tagItem">{{ tagItem }}</view>
							</view>
							<view class="job-meta">
								<view class="meta-items">
									<view data-v-13f2354f="">{{ item.companyPosition }}</view>
								</view>
								<view class="meta-items">
									<view data-v-13f2354f="">{{ item.education }}</view>
								</view>
								<view class="meta-items">
									<view data-v-13f2354f="">{{ item.time }}</view>
								</view>
							</view>
							<view class="job-highlights">
								<view class="highlight-item" v-for="jobHigh in item.jobHighlights">
									<view>{{ jobHigh }}</view>
								</view>
							</view>
						</view>
						<view class="job-status">
							<view class="status-tag urgent">{{ item.statusTag }}</view>
							<view class="action-btn">立即投递</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			jobList: [
				{
					id: 1,
					companyName: '字节跳动',
					companyCount: '10000人以上',
					companyIndustry: '互联网',
					jobTitle: '前端开发工程师',
					jobSalary: '25-50K·13薪',
					jobTags: ['React', 'Vue', 'TypeScript'],
					companyPosition: '北京',
					education: '本科',
					time: '1小时前',
					jobHighlights: ['快速晋升', '业内顶尖薪资', '氛围好'],
					statusTag: '急招'
				}, {
					id: 2,
					companyName: '阿里巴巴',
					companyCount: '10000人以上',
					companyIndustry: '互联网',
					jobTitle: 'Java开发工程师',
					jobSalary: '20-40K·16薪',
					jobTags: ['Java', 'Spring Boot', 'MySQL'],
					companyPosition: '杭州',
					education: '本科',
					time: '2小时前',
					jobHighlights: ['可提供住宿', '应届生优先'],
					statusTag: '新登记'
				}, {
					id: 3,
					companyName: '腾讯',
					companyCount: '10000人以上',
					companyIndustry: '互联网',
					jobTitle: '产品经理',
					jobSalary: '25-45K·14薪',
					jobTags: ['产品规划', '用户增长', '市场分析'],
					companyPosition: '深圳',
					education: '本科',
					time: '3小时前',
					jobHighlights: ['双休', '五险一金', '免费三餐'],
					statusTag: '急招'
				}
			],
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		},
	}
}
</script>

<style>
.main-content {
	padding: 0;
	background-color: #f5f5f5;
}

.main {
	width: 100%;
	margin: 5vmin 0;
	box-sizing: border-box;
}

.main .job-list {
	width: 100%;
	padding: 0 5vmin;
	padding-bottom: 8vmin;
	border-radius: 3vmin;
	box-shadow: 0 0.5vmin 2vmin #0000000a;
	display: flex;
    flex-direction: column;
    gap: 4vmin;
	box-sizing: border-box;
}

.main .job-card {
	background: #fff;
    border-radius: 3vmin;
    padding: 5vmin;
    box-shadow: 0 0.5vmin 2vmin #0000000a;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.main .company-info {
    display: flex;
    gap: 4vmin;
    margin-bottom: 4vmin;
}

.main .company-logo {
    width: 12vmin;
    height: 12vmin;
    border-radius: 2vmin;
    object-fit: cover;
}

.main .company-meta {
    flex: 1;
}

.main .company-name {
    font-size: 4vmin;
    font-weight: 500;
    margin-bottom: 2vmin;
    color: #333;
}

.main .company-tags {
    display: flex;
    gap: 2vmin;
}

.main .tag {
    padding: 1vmin 2vmin;
    border-radius: 1vmin;
    font-size: 3vmin;
    background: #f5f5f5;
    color: #666;
}

.main .job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3vmin;
}

.main .job-title {
    font-size: 4.5vmin;
    font-weight: 600;
    color: #333;
}

.main .job-salary {
    font-size: 4vmin;
    font-weight: 600;
    color: #ff4081;
}

.main .job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2vmin;
    margin-bottom: 3vmin;
}

.main .job-meta {
    display: flex;
    gap: 4vmin;
    margin-bottom: 4vmin;
    color: #666;
}

.main .meta-items {
    display: flex;
    align-items: center;
    gap: 1vmin;
    font-size: 3.5vmin;
}

.main .job-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 3vmin;
    margin-bottom: 4vmin;
    padding: 3vmin;
    background: #f8f8f8;
    border-radius: 2vmin;
}

.main .highlight-item {
    display: flex;
    align-items: center;
    gap: 1vmin;
}

.main .highlight-item > view {
    font-size: 3.5vmin;
    color: #07c160;
}

.main .job-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main .status-tag {
    padding: 1vmin 2vmin;
    border-radius: 1vmin;
    font-size: 3vmin;
	background: #fff3e0;
    color: #ef6c00;
}

.main .action-btn {
    padding: 2vmin 4vmin;
    border-radius: 5vmin;
    font-size: 3.5vmin;
    background: #07c160;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all .2s ease;
}
</style>
